<template>
  <div>
    <div class="my-body">
      <div class="ipt_a">
        <div style="float: left; line-height: 30px" class="tab_font-size">
          积分状态：
        </div>
        <el-select
          v-model="value"
          placeholder="请选择授权状态"
          style="width: 150px"
        >
          <el-option label="全部" value="beijing"></el-option>
          <el-option label="审核中" value="shanghai"></el-option>
          <el-option label="申请驳回" value="beijing"></el-option>
          <el-option label="审核通过" value="shanghai"></el-option>
        </el-select>
      </div>
      <div class="ipt_a">
        <div style="float: left; line-height: 30px" class="tab_font-size">
          申请类型：
        </div>
        <el-select
          v-model="value"
          placeholder="请选择授权状态"
          style="width: 150px"
        >
          <el-option label="全部" value="beijing"></el-option>
          <el-option label="单台积分" value="shanghai"></el-option>
          <el-option label="首植" value="beijing"></el-option>
        </el-select>
      </div>
      <div class="ipt_a">
        <div style="float: left; line-height: 30px" class="tab_font-size">
          医院地区：
        </div>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 150px; height: 50px; float: left"
        ></el-input>
      </div>
      <div class="ipt_a">
        <div style="float: left; line-height: 30px" class="tab_font-size">
          经销商：
        </div>
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 150px; height: 50px; float: left"
        ></el-input>
      </div>
      <!-- <div class="ipt_b">
			<div style="float: left; line-height: 30px;">终止日期</div>
			<div class="block">

				<el-date-picker v-model="value1" type="date" placeholder="选择日期">
				</el-date-picker>
			</div>
		</div>
		<div class="ipt_a">
			<div style="float: left; line-height: 30px;">医院地区：</div>
			<el-input v-model="input" placeholder="请输入内容" style=" width: 150px;height: 50px; float: left;"></el-input>
		</div> -->

      <div>
        <el-button type="primary" plain>查询</el-button>
        <el-button>清空</el-button>

        <div style="width: 100%; float: left">
          <div>
            <el-button type="primary" @click="area = true" plain
              >申请</el-button
            >

            <el-button type="danger" plain @click="deljifen">删除</el-button>
          </div>
          <el-dialog
            title="申请"
            :visible.sync="area"
            width="50%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <el-form ref="form" :model="form" label-width="150px">
                <!-- <el-form-item label="积分规则申请编号">
                  <el-input v-model="form.name" style="width: 200px"></el-input>
                  <el-button type="primary">刷新</el-button>
                </el-form-item> -->
                <el-form-item label="经销商">
                  <el-input
                    v-model="form.company_code"
                    style="width: 50px"
                  ></el-input>
                  <el-input v-model="form.name" style="width: 200px"></el-input>
                  <el-button type="primary" @click="jingxiaoshang"
                    >...</el-button
                  >
                </el-form-item>
                <el-form-item label="医院">
                  <el-input
                    v-model="yiyuansousuo"
                    style="width: 200px"
                  ></el-input>
                  <el-button type="primary">刷新</el-button>
                </el-form-item>
                <!-- <el-form-item label="有效授权编号">
                  <el-input v-model="form.name" style="width: 200px"></el-input>
                </el-form-item> -->
                <el-table
                  :data="tableDatasqyylb"
                  border
                  style="width: 100%"
                  highlight-current-row
                  ref="zhuhetongsq"
                  @current-change="handleCuChangeyiyuanhdq"
                >
                  <el-table-column
                    fixed
                    prop="hospital_area_name"
                    label="授权医院或地区"
                  >
                  </el-table-column>
                </el-table>
                <!-- <el-form-item label="合同编号">
                  <el-input
          v-model="input"
          placeholder="合同编号"
          style="width: 150px; height: 50px; float: left"
        ></el-input>
                </el-form-item>
                <el-form-item label="主合同编号">
                  <el-input
          v-model="input"
          placeholder="主合同编号"
          style="width: 150px; height: 50px; float: left"
        ></el-input>
                </el-form-item> -->
                <el-form-item label="积分申领类型">
                  <el-select
                    v-model="form.region"
                    placeholder="请选择活动区域"
                    @change="changejifenleix"
                  >
                    <el-option label="一次性积分" value="1"></el-option>
                    <el-option label="首植积分" value="2"></el-option>
                    <el-option label="月度积分" value="3"></el-option>
                    <el-option label="季度积分" value="4"></el-option>
                    <el-option label="特殊积分" value="5"></el-option>
                    <!-- <el-option
                        label="其他"
                        value="shanghai"
                      ></el-option> -->
                  </el-select>
                </el-form-item>
                <el-form-item label="一次性积分" v-if="jifenlei == 1">
                  <div style="width: 100%; height: 50px; float: left">
                    <div style="width: 80%; height: 100%; float: left">
                      <div style="float: left">积分数值：</div>
                      <input style="width: 40%; height: 70%; margin-left: 2%" />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="首植" v-if="jifenlei == 2">
                  <div style="width: 100%; height: 50px; float: left">
                    <div style="width: 30%; height: 100%; float: left">
                      <span>首植数值：</span>
                      <input style="width: 40%; height: 70%" />
                    </div>
                    <div style="width: 20%; height: 100%; float: left">
                      <span>台：</span>
                      <input style="width: 60%; height: 70%" />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="月度积分" v-if="jifenlei == 3">
                  <div style="width: 100%; height: 50px; float: left">
                    <div style="width: 80%; height: 100%; float: left">
                      <div style="height: 70%; float: left">植入指标:</div>
                      <input style="width: 20%; height: 70%; float: left" />
                      <div style="float: left">月度积分数值：</div>
                      <input style="width: 20%; height: 70%; float: left" />
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="季度积分" v-if="jifenlei == 4">
                  <div style="width: 100%; height: 100px; float: left">
                    <div style="width: 80%; height: 50%; float: left">
                      <div style="height: 70%; float: left; margin-left: 1%; padding: 0 5px;">
                        达标:
                      </div>
                      <el-input style="width: 13%; height: 70%; float: left" v-model="jidu.jidu.ok.points" />
                      <div style="float: left; margin-left: 1%; padding: 0 5px;">未达标</div>
                      <el-input style="width: 13%; height: 70%; float: left" v-model="jidu.jidu.no.points" />
                      <div style="float: left; margin-left: 1%;padding: 0 5px;">订单积分使用率</div>
                      <el-input style="width: 13%; height: 70%; float: left" v-model="jidu.jidu.use_point_percent" />%
                    </div>
                    <div style="width: 100%; height: 50%; float: left">
                      <div style="height: 70%; float: left;padding: 0 5px;">一季度:</div>
                      <el-input style="width: 10%; height: 70%; float: left" v-model="jidu.jidu.Q1"/>
                      <div style="float: left;padding: 0 5px;">二季度：</div>
                      <el-input style="width: 10%; height: 70%; float: left" v-model="jidu.jidu.Q2"/>

                      <div style="float: left;padding: 0 5px;">三季度：</div>
                      <el-input style="width: 10%; height: 70%; float: left" v-model="jidu.jidu.Q3"/>

                      <div style="float: left;padding: 0 5px;">四季度：</div>
                      <el-input style="width: 10%; height: 70%; float: left" v-model="jidu.jidu.Q4"/>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="特殊积分" v-if="jifenlei == 5">
                  <div style="width: 100%; height: 50px; float: left">
                    <div style="width: 80%; height: 100%; float: left">
                      <div style="float: left">特殊积分数值：</div>
                      <input style="width: 20%; height: 70%; float: left" />
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="备注">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">提交</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-dialog>

          <el-dialog
            title="关联企业列表"
            :visible.sync="areaglqylb"
            width="50%"
            :before-close="handleClose"
          >
            <div style="width: 100%">
              <div class="ipt_a">
                <div style="float: left; line-height: 30px">企业编号：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
              </div>

              <div class="ipt_a">
                <div style="float: left; line-height: 30px">企业名称：</div>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  style="width: 150px; height: 50px; float: left"
                ></el-input>
              </div>
              <el-button type="primary">查询</el-button>
              <template>
                <el-table
                  :data="qiyelist"
                  border
                  style="width: 100%; margin-top: 30px"
                 :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                  ref="singleTable"
                  highlight-current-row
                  @current-change="handleCurrentChangelist"
                >
                  <el-table-column fixed prop="company_code" label="企业编号">
                  </el-table-column>
                  <el-table-column prop="name" label="企业名称">
                  </el-table-column>

                  <!-- <el-table-column prop="province" label="授权产品类型">
								</el-table-column>
								<el-table-column prop="address" label="组织代码">
								</el-table-column>
								<el-table-column prop="address" label="税号">
								</el-table-column> -->
                </el-table>
                <el-pagination
                  @size-change="handleSizeChangea"
                  @current-change="handleCurrentChangea"
                  :current-page="currentPages"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="qiyelisttotal"
                >
                </el-pagination>
              </template>
            </div>
          </el-dialog>
          <template>
            <el-table
              :data="tableData"
              border
              style="width: 100%; margin-top: 30px"
              :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
              ref="singleTable"
              highlight-current-row
              @current-change="handleCuChange"
              height="324"
            >
              <el-table-column
                fixed
                prop="rule_code"
                label="申请编号"
                width="150"
              >
              </el-table-column>
              <el-table-column prop="bianhao" label="授权申请编号" width="150">
              </el-table-column>
              <el-table-column prop="create_time" label="申请日期" width="120">
              </el-table-column>
              <el-table-column prop="enddate" label="主合同编号" width="120">
              </el-table-column>
              <el-table-column prop="hospital_area_name" label="授权医院或地区" width="120">
              </el-table-column>
              <el-table-column prop="province" label="积分状态" width="120">
              </el-table-column>
              <el-table-column prop="address" label="达标单台积分" width="200">
              </el-table-column>
              <el-table-column
                prop="shouqfang"
                label="未达标单台积分"
                width="200"
              >
              </el-table-column>
              <el-table-column
                prop="jingxiaos"
                label="订单积分使用"
                width="200"
              >
              </el-table-column>
              <el-table-column prop="peisonf" label="Q1植入指标*" width="200">
              </el-table-column>
              <el-table-column prop="peisonf" label="Q2植入指标" width="200">
              </el-table-column>
              <el-table-column prop="peisonf" label="Q3植入指标" width="200">
              </el-table-column>
              <el-table-column prop="peisonf" label="Q4植入指标" width="200">
              </el-table-column>
              <el-table-column prop="peisonf" label="首植台数" width="200">
              </el-table-column>
              <el-table-column prop="peisonf" label="首植积分" width="200">
              </el-table-column>
              <el-table-column prop="peisonf" label="植入指标" width="200">
              </el-table-column>
              <el-table-column fixed="right" label="操作日志" width="100">
                <template slot-scope="scope">
                  <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    >审核日志</el-button
                  >
                </template>
              </el-table-column>

              <el-table-column prop="peisonf" label="备注" width="200">
              </el-table-column>
            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPages"
              :page-sizes="[10, 20]"
              :page-size="pageSizes"
              :total="totallist"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </template>
        </div>
      </div>
    </div>
    <div class="my-body">
      <div>
        <div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px" class="tab_font-size">
              积分状态：
            </div>
            <el-select
              v-model="value"
              placeholder="请选择授权状态"
              style="width: 130px; float: left"
            >
              <el-option label="全部" value="beijing"></el-option>
              <el-option label="审核中" value="shanghai"></el-option>
              <el-option label="申请驳回" value="beijing"></el-option>
              <el-option label="审核通过" value="shanghai"></el-option>
            </el-select>
          </div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px" class="tab_font-size">
              申领年份：
            </div>
            <div class="block">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
                style="width: 130px; float: left"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px" class="tab_font-size">
              医院地区：
            </div>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              style="width: 130px; height: 50px; float: left"
            ></el-input>
          </div>
          <div class="ipt_a">
            <div style="float: left; line-height: 30px" class="tab_font-size">
              经销商：
            </div>
            <el-input
              v-model="input"
              placeholder="请输入内容"
              style="width: 130px; height: 50px; float: left"
            ></el-input>
          </div>
          <el-button type="primary" plain>查询</el-button>
          <el-button>清空</el-button>
        </div>
        <div style="width: 100%; float: left">
          <div style="">
            <div>
              <el-button type="primary" @click="tjjfsq = true" plain
                >申请</el-button
              >

              <el-button type="danger" plain>删除</el-button>
            </div>
            <el-dialog
              title="申请积分申领"
              :visible.sync="tjjfsq"
              width="50%"
              :before-close="handleClose"
            >
              <div style="width: 100%">
                <el-form ref="form" :model="form" label-width="150px">
                  <el-form-item label="积分申领编号">
                    <el-input
                      v-model="form.name"
                      style="width: 200px"
                    ></el-input>
                    <el-button type="primary">刷新</el-button>
                  </el-form-item>
                  <el-form-item label="积分申领类型">
                    <el-select
                      v-model="form.region"
                      placeholder="请选择活动区域"
                    >
                      <el-option
                        label="一次性积分"
                        value="shanghai"
                      ></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="经销商">
                    <el-input
                      v-model="form.name"
                      style="width: 50px"
                    ></el-input>

                    <el-input
                      v-model="form.name"
                      style="width: 200px"
                    ></el-input>
                    <el-button type="primary">...</el-button>
                  </el-form-item>
                  <el-form-item label="有效授权编号">
                    <template>
                      <el-table
                        :data="tableData"
                        border
                        style="width: 100%; margin-top: 30px"
                       :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                        height="324"
                      >
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column
                          fixed
                          prop="bianhao"
                          label="有效授权编号"
                          width="150"
                        >
                        </el-table-column>
                        <el-table-column
                          fixed
                          prop="bianhao"
                          label="授权医院或地区"
                          width="150"
                        >
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-form-item>

                  <el-form-item label="申领积分">
                    <el-input v-model="form.desc"></el-input>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">申请</el-button>
                    <el-button>取消</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-dialog>
            <template>
              <el-table
                :data="tableData"
                border
                style="width: 100%; margin-top: 30px"
               :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
                height="324"
              >
                <el-table-column
                  fixed
                  prop="rule_code"
                  label="申请编号"
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  fixed
                  prop="bianhao"
                  label="授权申请编号"
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  label="申请日期"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="enddate" label="主合同编号" width="120">
                </el-table-column>
                <el-table-column
                  prop="hospital_name"
                  label="授权医院或地区"
                  width="120"
                >
                </el-table-column>
                <el-table-column prop="province" label="积分状态" width="120">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="达标单台积分"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="shouqfang"
                  label="未达标单台积分"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="jingxiaos"
                  label="订单积分使用"
                  width="200"
                >
                </el-table-column>
                <el-table-column prop="peisonf" label="Q1植入指标*" width="200">
                </el-table-column>
                <el-table-column prop="peisonf" label="Q2植入指标" width="200">
                </el-table-column>
                <el-table-column prop="peisonf" label="Q3植入指标" width="200">
                </el-table-column>
                <el-table-column prop="peisonf" label="Q4植入指标" width="200">
                </el-table-column>
                <el-table-column prop="peisonf" label="首植台数" width="200">
                </el-table-column>
                <el-table-column prop="peisonf" label="首植积分" width="200">
                </el-table-column>
                <el-table-column prop="peisonf" label="植入指标" width="200">
                </el-table-column>
                <el-table-column fixed="right" label="操作日志" width="100">
                  <template slot-scope="scope">
                    <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >审核日志</el-button
                    >
                  </template>
                </el-table-column>

                <el-table-column prop="remark" label="备注" width="200">
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getData, postData, request } from "@/utils/request.js";
export default {
  data() {
    return {
      area: false,
      tjjfsq: false,
      tablisty: false,
      tablistya: false,
      tablistyb: false,
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      options: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "一般订单",
        },
        {
          value: "3",
          label: "积分订单",
        },
        {
          value: "3",
          label: "样品订单",
        },
        {
          value: "3",
          label: "换货订单",
        },
      ],
      value1: "",
      value2: "",
      value3: "",
      form: {
        name: "",
        company_id: "",
        company_code: "",
        hospital_id: "",
        hospital_code: "",
        sq_type: "",
        empower_id: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      yiyuansousuo: "",
      radio: "授权医院",
      value: "",
      tableData: [],
      checkAll: false,
      checkedCities: [],
      cities: ["上海", "北京", "广州", "深圳"],
      isIndeterminate: true,
      currentPages: 1,
      pageSizes: 10,
      areaglqylb: false,
      qiyelist: [],
      qiyelisttotal: "",
      currentPagesa: 1,
      pageSizesa: 100,
      tableDatasqyylb: [], //授权医院列表
      input: "",
      jifenlei: "",
      jifenlistid:"",
      // 季度参数
     jidu:{
      jidu:{
        ok:{
          points:8000,
          product:{
            product_type_id:"",
          num:1
          }
        },
        no:{
          points:0,
          product:{
          product_type_id:"",
          num:1
          }
        },
        use_point_percent:30,
        Q1:8,
        Q2:8,
        Q3:8,
        Q4:8
      }
      }
         
    };
  },
  created() {
    this.jifenlist();
    this.listtab();
  },
  methods: {
    deljifen(){
      var data = {
        ids: this.jifenlistid,
        token: localStorage.getItem("token"),
       
      };
      postData("points.rule/del", data).then((res) => {
        console.log(res);
        this.jifenlist()
      });
    },
    changejifenleix(val) {
      this.jifenlei = val;
    },
    handleCuChange(val){
          this.jifenlistid = val.id
    },
    //  企业列表单选
    handleCurrentChangelist(val) {
      this.areaglqylb = false;
      console.log(val);
      this.form.company_id = val.id;
      this.form.company_code = val.company_code;
      this.form.name = val.name;
      this.listtabsqyy(val.id);
    },
    //授权医院单选
    handleCuChangeyiyuanhdq(val) {
      // this.areaglqylb = false
      console.log(val);
      this.form.sq_type = val.sq_type;
      this.form.hospital_id = val.hospital_area_id;
      this.form.hospital_code = val.hospital_area_code;
      this.form.empower_id = val.id
      // this.listtabsqyy(val.id)
    },
    //授权医院单选默认选中第一条
    zhuhetlist() {
      this.$refs.zhuhetongsq.setCurrentRow(this.tableDatasqyylb[0]);
    },
    //获取有效授权医院列表

    listtabsqyy(companyid) {
      var data = {
        company_id: companyid,
        token: localStorage.getItem("token"),
      };
      postData("company.empower/getHospitalProduct", data).then((res) => {
        this.tableDatasqyylb = res.data.hospital_area;
        this.handleCuChangeyiyuanhdq( this.tableDatasqyylb[0])
        this.zhuhetlist() 
      });
    },
    //企业列表分页
    handleSizeChangea(val) {
      console.log(`每页 ${val} 条`);
      this.pageSizesa = val;
      this.listtab();
    },
    handleCurrentChangea(val) {
      console.log(`当前页: ${val}`);
      this.currentPagesa = val;
      this.listtab();
    },
    // 企业列表
    listtab() {
      var data = {
        page: this.currentPagesa,
        limit: this.pageSizesa,
        token: localStorage.getItem("token"),
      };
      postData("company/indexList", data).then((res) => {
        this.qiyelist = res.data.data;
        this.qiyelisttotal = res.data.total;
      });
    },
    //申请提交
    onSubmit() {
      if(this.jifenlei == 4){
         var data = {
        company_id:this.form.company_id,
        company_code:this.form.company_code,
        hospital_id:this.form.hospital_id,
        hospital_code:this.form.hospital_code,
        approval_type:this.jifenlei,
        sq_type:this.form.sq_type,
        empower_id:this.form.empower_id,
        settings: JSON.stringify(this.jidu) ,
        
        token: localStorage.getItem("token"),
      };
      
      }
      console.log(data)
      postData("points.rule/operation", data).then((res) => {
        console.log(res)
      });
    },
    jingxiaoshang() {
      this.areaglqylb = true;
    },
    jifenlist() {
      var data = {
        token: localStorage.getItem("token"),
        page: this.currentPages,
        limit: this.pageSizes,
      };
      postData("points.rule/indexlist", data).then((res) => {
        this.tableData = res.data.data;
        this.totallist = res.data.total;
      });
    },
    handleClick(row) {
      console.log(row);
    },
    handleCurrentChange(val) {
      this.currentPages = val;
      this.jifenlist();
    },
    handleSizeChange(val) {
      this.pageSizes = val;
      this.jifenlist();
    },
    handleCheckAllChange(val) {
      const cityOptions = ["上海", "北京", "广州", "深圳"];
      console.log(val);
      this.checkedCities = val ? cityOptions : [];

      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.ipt_a {
  width: 240px;
  height: 50px;
  float: left;
}

.ipt_b {
  width: 450px;
  height: 50px;
  float: left;
}
</style>